window.onload=function(){
    var userId = sessionStorage.getItem('userId');
    console.log(userId);
    function fmoney(s, n)
    {
        n = n > 0 && n <= 20 ? n : 2;
        s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + '';
        var l = s.split('.') [0].split('').reverse(),
            r = s.split('.') [1];
        var  t = '';
        for (var i = 0; i < l.length; i++)
        {
            t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : '');
        }
        return t.split('').reverse().join('');
    }
    var vm=new Vue({
        el:"body",
        data:{
            //默认加载筛选条件存放容器
            "IP":'https://up-bi.pec.com.cn',
            "year_month":[],//年份
            "pay_modal":[],//支付方式
            "opera_modal":[],//运营模式
            "pro_source":[],//产品来源
            "spike":[],//通路
            //"year":[],//年份
            //"month":["01","02","03","04","05","06","07","08","09","10","11","12"],//月份
            "provCity":[],//省市
            "skuAll":[],//所有的sku信息

            "provIdcity":[],//省对应的城市-//选中的省对应的城市列表列表信息
            "proName":"",//点击的省份名称
            "proId":"",//点击的省的id

            "getYear":'',//选中的日期
            "lastYear":'',//选中的日期
            "getMonth":'',//选中的月份
            "getPayItem":[],//选中的支付方式
            "getOperaItem":[],//选中的运营模式
            "getProSourceItem":[],//选中的产品来源

            "getProviceId":[],//选中的省份ID
            "getProviceLabel":[],//选中的省份label
            "getProviceStr":"",//选中的身份字符串

             "getAllCities":[],//获取所有的城市信息
            "getCityId":[],//选中的城市ID
            "getCityLabel":[],//选中的城市label
            "getCityStr":"",//选中的城市字符串

            "getSpikeId":[],//选中的通路ID
            "getSpikeLabel":[],//选中的通路label
            "getSpikeStr":"",//选中的通路字符串

            "getSkuId":[],//选中的sku信息
            "getSkuStr":"",//选中的sku字符串
            "getSkuLabel":[],//选中的skulabel


            "getCityPoint":[],//选择的城市下对应的点位
            "getPointId":[],//选中的点位ID
            "getPointStr":[],//选中的点位字符串
            "getPointLabel":[],//选中的点位label

            "modelSelect":{
                "model":"sale_time",
                "condition":{
                    "year_month":"",
                    "pay_modal":[],
                    "opera_modal":[],
                    "prod_source":[],
                    "passageway":[],
                    "provice":[],
                    "city":[],
                    "sku_msg":[],
                    "point_location":[]
                },//筛选条件
                "item": {"main_index":{"sale_amount":1},
                "sale_amount":[1,2]}//主指标
            }//筛选条件的数据查询条件
        },
        methods:{
            //加载筛选条件
            setSelect:function(){
                this.$http.post(this.IP+'/data-center/month/getScreenTerm?token='+userId,
                    {},
                    {emulateJSON:true})
                    .then(
                        function(res){
                            console.log(res.data);
                            var data=res.data;
                           // this.year=data.year_month;
                            this.pay_modal=data.pay_modal;
                            this.pro_source=data.prod_source;
                            this.opera_modal=data.opera_modal;
                            this.spike=data.spike;
                            this.provCity=data.provice;
                            this.getAllCities=getCityes(this.provCity);
                            this.skuAll=data.sku_msg;
                            //console.log(this.getAllCities);
                        },
                        function(res){
                            console.log(res.data);
                        });

                //默认的请求
                var modelSend={
                    "model":'sale_time',
                    "condition":{},
                    "item":{
                        "main_index":{"sale_amount":"1"},
                        "sale_amount":["1","2","3"]
                    }
                };
                // //销售看板
                // var yearSalesChart = new DRAWPRTAITCHART('http://192.168.1.130:8080/data-center/annualBoard/getAnnualBoardInfo?token='+userId, modelSend, 'salesChart');
                // yearSalesChart.draw();
                //渲染复购次数
                $.ajax({
                    url: this.IP+"/data-center/month/getSaleData?token="+userId,
                    type: "POST",
                    data:{"paramData":JSON.stringify(modelSend)},
                    success:function(data){
                        console.log(data);
                        $(".loding").hide();
                        for(var i=0;i<data.data.length;i++){
                            console.log(data.data[i]);
                            var num = data.data[i].time.length;
                            var str='';
                            str+='<div class="mainbox">' +
                                '<h4>'+data.data[i].beginDate + "——" + data.data[i].endDate + '(第'+data.data[i].label +'周)'+'</h4>' +
                                '<div class="mainList">' +
                                '<ul>\n' +
                                '<li>复购次数</li>' +
                                '<li>支付宝</li>' +
                                '<li>微信</li>' +
                                '<li>合计</li>' +
                                '<li>占比</li>' +
                                '</ul>' +
                                '<ul>'+
                                '<li>'+ data.data[i].time[num-1] +'</li>'+
                                '<li>'+ fmoney(data.data[i].alipay[num-1],2) +'</li>'+
                                '<li>'+ fmoney(data.data[i].weChat[num-1],2) +'</li>'+
                                '<li>'+ fmoney(data.data[i].total[num-1],2) +'</li>'+
                                '<li>'+ data.data[i].duty[num-1] +'%</li>'+
                                '</ul>';
                            for(var j=0;j<num-1;j++){
                                str += '<ul>'+
                                    '<li>'+ data.data[i].time[j] +'</li>'+
                                    '<li>'+ fmoney(data.data[i].alipay[j],2) +'</li>'+
                                    '<li>'+ fmoney(data.data[i].weChat[j],2) +'</li>'+
                                    '<li>'+ fmoney(data.data[i].total[j],2) +'</li>'+
                                    '<li>'+ data.data[i].duty[j] +'%</li>'+
                                    '</ul>';
                            }
                            str+='</div>';
                            $(".main").append(str);
                        }
                    }
                })

            },
            //根据省份展示城市
            showCity:function(proId,proName){
                this.proName=proName;//动态变化选择市中省份名字
                this.proId=proId;
                //console.log(proId);
                //console.log(this.provCity);
                for(var i=0;i<this.provCity.length;i++)
                {
                    if(this.provCity[i].id==proId){
                        this.provIdcity=this.provCity[i].city;
                    }
                }
            },
            //获取选择的通路
            getSpike:function(){
                this.getSpikeLabel.length=0;
                for (var i = 0; i < this.getSpikeId.length; i++) {
                    var id = this.getSpikeId[i];
                    for (var j = 0; j < this.spike.length; j++) {
                        var thisSpike = this.spike[j];
                        if (thisSpike.id == id) {
                            this.getSpikeLabel.push(thisSpike.label);
                        }
                    }
                }
                //选择的通路长度为14，大于14省略之后的
                this.getSpikeStr=this.getSpikeLabel.join(",").length>15?this.getSpikeLabel.join(",").substr(0,15)+"...":this.getSpikeLabel.join(",");
            },
            //获取选择的sku
            getSku:function(){
                this.getSkuLabel.length=0;
                for (var i = 0; i < this.getSkuId.length; i++) {
                    var id = this.getSkuId[i];
                    for (var j = 0; j < this.skuAll.length; j++) {
                        var thisSpike = this.skuAll[j];
                        if (thisSpike.id == id) {
                            this.getSkuLabel.push(thisSpike.label);
                        }
                    }
                }
                //选择的通路长度为14，大于14省略之后的
                this.getSkuStr=this.getSkuLabel.join(",").length>15?this.getSkuLabel.join(",").substr(0,15)+"...":this.getSkuLabel.join(",");
            },
            //获取选择的省份
            getProv:function(){
                var arr=[];
                var selectPro=$("input[data-cacheval='false']");
                //console.log(selectPro);
                for(var i=0;i<selectPro.length;i++){
                    arr.push(selectPro[i].id);
                }
                this.getProviceId=arr;
                var arrLabel=[];
                for(var i=0;i<arr.length;i++){
                    for(var j=0;j<this.provCity.length;j++){
                        if(this.provCity[j].id==arr[i]){
                            arrLabel.push(this.provCity[j].label);
                        }
                    }
                }
                this.getProviceLabel=arrLabel;
                this.getProviceStr=this.getProviceLabel.join(",").length>15?this.getProviceLabel.join(",").substr(0,15)+"...":this.getProviceLabel.join(",");

            },
            //获取选择的城市
            getselCity:function(){
                //console.log(this.getAllCities);
                //根据选中的城市id获取选中的城市label
                var cityLabel=[];
                for(var i=0;i<this.getCityId.length;i++){
                    for(var j=0;j<this.getAllCities.length;j++){
                        if(this.getAllCities[j].id==this.getCityId[i]){
                            cityLabel.push(this.getAllCities[j].label);
                        }
                    }
                }
                this.getCityLabel=cityLabel;
            },
            //获取点位信息
            getPoint:function(){
                console.log(this.getCityId);
                var arr=this.getCityId;
                var sendData={"condition":{"city":arr}};
                console.log(sendData);
                this.$http.post(this.IP+'/data-center/month/getCityPoint?token='+userId,
                    {"paramData":JSON.stringify(sendData)},
                    {emulateJSON:true})
                    .then(
                        function(res){
                            console.log(res.data);
                            this.getCityPoint=res.data.city_point;
                        },
                        function(res){
                            console.log(res.data);
                        });
            },
            //获取选择的筛选条件并按条件绘图
            getSelect:function(){
                //console.log("年："+this.getYear);
                //console.log("月："+this.getMonth);
                //console.log("支付方式："+this.getPayItem);
                //console.log("运营模式："+this.getOperaItem);
                //console.log("产品来源："+this.getProSourceItem);
                //console.log("选中的通路："+this.getSpikeId);
                //console.log("选中的省份:"+this.getProviceId);
                //console.log("选中的城市:"+this.getCityId);

                //根据获取的筛选条件请求数据

                //this.modelSelect.condition.year_month=((this.getYear==0&&this.getMonth==0)?"":(this.getYear+"-"+this.getMonth));
                this.modelSelect.condition.year_month=this.getYear;
                this.modelSelect.condition.year_months=this.lastYear;
                this.modelSelect.condition.pay_modal=this.getPayItem;
                this.modelSelect.condition.opera_modal=this.getOperaItem;
                this.modelSelect.condition.prod_source=this.getProSourceItem;
                //选中的通路
                this.modelSelect.condition.passageway=this.getSpikeId;
                this.modelSelect.condition.provice=this.getProviceId;
                //选中的二级通路
                var getTwo=document.querySelectorAll('[name="accTwoCheck"]:checked');
                var arr=[];
                for(var i=0;i<getTwo.length;i++){
                    arr.push(getTwo[i].getAttribute('id'));
                }
                this.modelSelect.condition.getTwospike=arr;
                this.modelSelect.condition.city=this.getCityId;
                this.modelSelect.condition.sku_msg=this.getSkuId;
                this.modelSelect.condition.point_location=this.getPointId;
                this.modelSelect.item={"main_index":{}};
                this.modelSelect.item.sale_amount=[1,2];
                this.modelSelect.item.main_index.sale_amount=1;
                var a=eval('('+JSON.stringify(this.modelSelect)+')');
                console.log(a);
                //销售看板
                //渲染复购次数
                $.ajax({
                    url: this.IP+"/data-center/month/getSaleData?token="+userId,
                    type: "POST",
                    data:{"paramData":JSON.stringify(this.modelSelect)},
                    success:function(data){
                        $(".main").html("");
                        for(var i=0;i<data.data.length;i++){
                            console.log(data.data[i]);
                            var num = data.data[i].time.length;
                            var str='';
                            str+='<div class="mainbox">' +
                                '<h4>'+data.data[i].beginDate + "——" + data.data[i].endDate + '(第'+data.data[i].label +'周)'+'</h4>' +
                                '<div class="mainList">' +
                                '<ul>\n' +
                                '<li>复购次数</li>' +
                                '<li>支付宝</li>' +
                                '<li>微信</li>' +
                                '<li>合计</li>' +
                                '<li>占比</li>' +
                                '</ul>' +
                                '<ul>'+
                                '<li>'+ data.data[i].time[num-1] +'</li>'+
                                '<li>'+ fmoney(data.data[i].alipay[num-1],2) +'</li>'+
                                '<li>'+ fmoney(data.data[i].weChat[num-1],2) +'</li>'+
                                '<li>'+ fmoney(data.data[i].total[num-1],2) +'</li>'+
                                '<li>'+ data.data[i].duty[num-1] +'%</li>'+
                                '</ul>';
                            for(var j=0;j<num-1;j++){
                                str += '<ul>'+
                                    '<li>'+ data.data[i].time[j] +'</li>'+
                                    '<li>'+ fmoney(data.data[i].alipay[j],2) +'</li>'+
                                    '<li>'+ fmoney(data.data[i].weChat[j],2) +'</li>'+
                                    '<li>'+ fmoney(data.data[i].total[j],2) +'</li>'+
                                    '<li>'+ data.data[i].duty[j] +'%</li>'+
                                    '</ul>';
                            }
                            str+='</div>';
                            $(".main").append(str);
                        }
                    }
                })
                //第一个a的class为actice
                $("#selMain li:first-child a").removeClass().addClass('ui-link ui-btn ui-btn-active');
            },
            //根据选择的主指标进行画图
            getMain:function(e){
                var mainTag=e.target.getAttribute('tag');
                if(mainTag=="sale_amount"){
                    this.modelSelect.item={"main_index":{}};
                    this.modelSelect.item.sale_amount=[1,2];
                    this.modelSelect.item.main_index.sale_amount=1;
                }
                else if(mainTag=="sku_sum"){
                    this.modelSelect.item={"main_index":{}};
                    this.modelSelect.item.sku_sum=[1,2];
                    this.modelSelect.item.main_index.sku_sum=1;
                }
                else if(mainTag=="vender_sum"){
                    this.modelSelect.item={"main_index":{}};
                    this.modelSelect.item.vender_sum=[1,2];
                    this.modelSelect.item.main_index.vender_sum=1;
                }
                var a=eval('('+JSON.stringify(this.modelSelect)+')');
                //console.log(a);
                //销售看板
                /*var yearSalesChart = new DRAWPRTAITCHART('http://192.168.1.124:8080/data-center/month/getSaleData?token="+userId, a, 'salesChart');
                yearSalesChart.draw();*/
                //渲染复购次数
                $.ajax({
                    url: this.IP+"/data-center/month/getSaleData?token="+userId,
                    type: "POST",
                    data:{"paramData":JSON.stringify(this.modelSelect)},
                    success:function(data){
                        $(".main").html("");
                        for(var i=0;i<data.data.length;i++){
                            console.log(data.data[i]);
                            var num = data.data[i].time.length;
                            var str='';
                            str+='<div class="mainbox">' +
                                '<h4>'+data.data[i].beginDate + "——" + data.data[i].endDate + '(第'+data.data[i].label +'周)'+'</h4>' +
                                '<div class="mainList">' +
                                '<ul>\n' +
                                '<li>复购次数</li>' +
                                '<li>支付宝</li>' +
                                '<li>微信</li>' +
                                '<li>合计</li>' +
                                '<li>占比</li>' +
                                '</ul>' +
                                '<ul>'+
                                '<li>'+ data.data[i].time[num-1] +'</li>'+
                                '<li>'+ fmoney(data.data[i].alipay[num-1],2) +'</li>'+
                                '<li>'+ fmoney(data.data[i].weChat[num-1],2) +'</li>'+
                                '<li>'+ fmoney(data.data[i].total[num-1],2) +'</li>'+
                                '<li>'+ data.data[i].duty[num-1] +'%</li>'+
                                '</ul>';
                            for(var j=0;j<num-1;j++){
                                str += '<ul>'+
                                    '<li>'+ data.data[i].time[j] +'</li>'+
                                    '<li>'+ fmoney(data.data[i].alipay[j],2) +'</li>'+
                                    '<li>'+ fmoney(data.data[i].weChat[j],2) +'</li>'+
                                    '<li>'+ fmoney(data.data[i].total[j],2) +'</li>'+
                                    '<li>'+ data.data[i].duty[j] +'%</li>'+
                                    '</ul>';
                            }
                            str+='</div>';
                            $(".main").append(str);
                        }
                    }
                })

            },

        }
    });
    //默认执行页面
    vm.setSelect();
}
//获取所有的城市
function getCityes(arrList){
    var arr=[];

    for(var i=0;i<arrList.length;i++){
        var pro=arrList[i].city;
        //console.log(pro);
        for(var j=0;j<pro.length;j++){
            var city=pro[j];
            arr.push(city);
        }
    }
    return arr;
}